<template>
  <view class="main">
    <view class="one">
      <view class="one-bg">
        <image  src="/static/mine/userb.png" mode="aspectFill"/>
      </view>
      <view class="item common dispaly-just-between">
        <view class="left">
          <image
              :src="formData.avatar"
              mode="aspectFill" @click="priview(formData.avatar)"/>
        </view>
        <view class="right txt" @click="uploadAvatar">上传图片</view>
      </view>
    </view>
    <view class="form-item">
      <view class="one-bg">
        <image  src="/static/mine/users.png" mode="aspectFill"/>
      </view>
      <view class="item common dispaly-just-between">
        <view class="left txt">
          <input type="text" placeholder="昵称" v-model="formData.nickName">
        </view>
        <view class="right">
          <image class="one-bg" src="/static/mine/right.png" mode="aspectFill"/>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="one-bg">
        <image  src="/static/mine/users.png" mode="aspectFill"/>
      </view>
      <view class="item common dispaly-just-between">
        <view class="left txt">
          <input type="number" maxlength="11" placeholder="电话号码" v-model="formData.phonenumber">
        </view>
        <view class="right">
          <image class="one-bg" src="/static/mine/right.png" mode="aspectFill"/>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="one-bg">
        <image  src="/static/mine/users.png" mode="aspectFill"/>
      </view>
      <view class="item common dispaly-just-between">
        <view class="left txt">
          <input type="number" maxlength="11" placeholder="QQ" v-model="formData.qq">
        </view>
        <view class="right">
          <image class="one-bg" src="/static/mine/right.png" mode="aspectFill"/>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="one-bg">
        <image  src="/static/mine/users.png" mode="aspectFill"/>
      </view>
      <view class="item common dispaly-just-between">
        <view class="left txt">
          <input type="text" maxlength="11" placeholder="微信" v-model="formData.wx">
        </view>
        <view class="right">
          <image class="one-bg" src="/static/mine/right.png" mode="aspectFill"/>
        </view>
      </view>
    </view>
    <view class="form-item" @click="show = true">
      <view class="one-bg">
        <image  src="/static/mine/users.png" mode="aspectFill"/>
      </view>
      <view class="item common dispaly-just-between">
        <view class="left txt">
          <input type="text" maxlength="11" placeholder="性别" disabled v-model="formData.sexName">
        </view>
        <view class="right">
          <image class="one-bg" src="/static/mine/right.png" mode="aspectFill"/>
        </view>
      </view>
    </view>
    <view class="one">
   <!--   <view class="one-bg">
        <image  src="/static/mine/userb.png" mode="aspectFill"/>
      </view> -->
      <!-- view class="item common dispaly-just-between">
        <view class="left">
          <image
              :src="formData.wxQr"
              mode="aspectFill" style="border-radius: 0" @click="priview(formData.wxQr)"/>
        </view>
        <view class="right txt" @click="uploadCode">上传收款码</view>
      </view> -->
    </view>
  </view>

  <view class="btn-box">
    <view class="item-box dispaly-just-between">
      <view class="item">
        <view class="b-txt dispaly-align-center" @click="$goUrl('back')">取消</view>
        <image src="/static/icon/xy.png" mode="aspectFill"/>
      </view>
      <view class="item">
        <view class="b-txt dispaly-align-center" style="color: #FFD257 " @click="submit">提交</view>
        <image src="/static/icon/buy.png" mode="aspectFill"/>
      </view>
    </view>
  </view>

  <up-picker @confirm="sexConfirm"  @cancel="show= false" cancelColor="#ee003e" confirmColor="#2d68ea" :show="show" :columns="columns" keyName="label" closeOnClickOverlay @close="show = false" ></up-picker>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {getUserInfo, updateUser} from '@/api/apiList';
import {onLoad} from '@dcloudio/uni-app'
import {deleteObjectEmptyKey, uploadImage} from '@/utils/util'

const columns = ref([
  [
    {
      label: '男',
      id: 1
    },
    {
      label: '女',
      id: 0
    }
  ]
]);
const show = ref(false)

onLoad(() => {
  getUserData()
})

const sexConfirm = (data) => {
  formData.sexName = data.value[0].label
  formData.sex = data.value[0].id
  show.value = false
}

const uploadAvatar = async () => {
  const res = await uploadImage(1)
  formData.avatar = res[0]
}

const uploadCode = async () => {
  const res = await uploadImage(1)
  formData.wxQr = res[0]
}

let formData = reactive({
  avatar: '',
  nickName: '',
  phonenumber: '',
  qq: '',
  wx: '',
  sex: '',
  userId: '',
  sexName: '',
  wxQr: ''
})

const priview = (img) => {
  uni.previewImage({
    current: 1,
    urls: [img]
  })
}

const userInfo = ref({})
const getUserData = async () => {
  const res = await getUserInfo()
  if(res.code == 200) {
    userInfo.value = res.data
    const {avatar, nickName, phonenumber, userId, qq, wx, sex, wxQr} = userInfo.value
    formData.avatar = avatar
    formData.nickName = nickName
    formData.phonenumber = phonenumber
    formData.userId = userId
    formData.qq = qq
    formData.wx = wx
    formData.sex = sex
    formData.sexName = formData.sex == 0 ? '女' : '男'
    formData.wxQr = wxQr
  }
}

const submit = async () => {
  await uni.showLoading({
    title:'修改中'
  })
  delete formData.sexName
  const newFormData = deleteObjectEmptyKey(formData)
  const res = await updateUser(newFormData)
  if(res.code == 200) {
    uni.hideLoading()
    await uni.showToast({
      title: '修改成功',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
}
</script>

<style lang="scss" scoped>
.common {
  padding: 10rpx 28rpx;
}

.txt {
  font-family: IPix;
  font-size: 28rpx;
  color: #000000;
}
.main {
  padding: 30rpx;
  .one {
    width: 692rpx;
    height: 140rpx;
    position: relative;
    margin-bottom: 20rpx;
    .one-bg {
      width: 692rpx;
      height: 140rpx;
      image {
        width: 692rpx;
        height: 140rpx;
      }
    }
    .item {
      position: absolute;
      top: 13rpx;
      left: 0;
      right: 0;
      .left {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .right {

      }
    }
  }
.form-item:last-child {
  margin-bottom: 0;
}
  .form-item {
    width: 692rpx;
    height: 92rpx;
    position: relative;
    margin-bottom: 20rpx;
    .one-bg {
      width: 692rpx;
      height: 92rpx;
      image {
        width: 692rpx;
        height: 92rpx;
      }
    }
    .item {
      position: absolute;
      top: 20rpx;
      left: 0;
      right: 0;
      .left {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .right {
        image {
          width: 14rpx;
          height: 22rpx;
        }
      }
    }
  }
}

.btn-box {
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;

  .item-box {
    padding: 18rpx 26rpx 0 26rpx;

    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;

      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }

      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}
</style>